<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
		<title>产品详情</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/swiper.min.css" />
		<link rel="stylesheet" href="../../css/shop.css" />
		<link rel="stylesheet" href="../../css/style.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<script src="../../js/jquery-2.1.4.js"></script>
		<script src="../../js/swiper.min.js"></script>
		<script src="../../js/poup.js"></script>
	</head>
	<style>
		.sbt {
			color: #fff;
			margin-top: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			line-height: 20px;
			background: #3ca582;
			padding: 4px;
		}
		.price{
			color:#343434;
		}
        [v-clock]{display: none;}
	</style>
	<body ontouchstart>
		<header class="ui-header ui-header-transparent" id="header-top">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="font-size:29px;margin-top:10px;color:#5d5d5d;"></a>
			<!-- <a href="javascript:;" class="ui-icon open-popup hd-right" data-target="#share">
				<span class="iconfont icon-fenxiang"></span>
			</a> -->
		</header>
		<div id="app" v-clock>
			<div class="ui-content">
				<div class=" group-wrap">
					<div class="swiper-container swiper-goods">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="o,i in goods.goods_details_img">
								<img :src="o" onerror='this.src="../../images/error.img.png"' alt="">
							</div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<div class="goods-preview">
						<div class="goods-title">{{goods.goods_name}}</div>
						<div class="goods-promo-panel">
							<em class="tm-yen">¥</em>
							<span class="tm-price">{{goods.shop_price}}</span>
							<del>¥{{goods.market_price}}</del>
							<span class="mom-tag">包邮</span>
						</div>
						<div class="goods-attr">
							<span class="item"><i class="iconfont icon-dot"></i>满88包邮</span>
							<span class="item"><i class="iconfont icon-dot"></i>不支持退货</span>
							<span class="item"><i class="iconfont icon-dot"></i>假一赔十</span>
						</div>
					</div>
				</div>
				<div class="group-wrap">
					<div class="module-sku open-popup" data-target="#skuG">
						<div class="skuText">
							<div class="l">选择</div>
							<div class="r">可选 规格</div>
							<div class="iconfont icon-moreread"></div>
						</div>
					</div>
				</div>
				
				<div class="module-wrap">
					<div class="scrolltips">
						<span class="txt">继续上啦查看更多图文</span>
					</div>
					<div class="sku-content">
						<img src="./../../images/content.jpg" alt="" />
						<img src="./../../images/content1.jpg" alt="" />
						<img src="./../../images/content2.jpg" alt="" />
						<img src="./../../images/content3.jpg" alt="" />
					</div>
				</div>
			</div>
			
			<!--猜你喜欢-->
			<div class="ui-content">
				<div class="module-wrap">
					<div class="scrolltips">
						<span class="txt">猜你喜欢</span>
					</div>
				</div>
			</div>
			<div class="juli">
				<div class="cp" style="padding-top:0;">
					<div class="k1" style="margin-bottom: 0.5rem;">
						<img src="../../images/1.jpg" onerror='this.src="../../images/error-img.png"' class="bfb">
						<p class="sbt">sdsdg</p>
						<p class="price">￥<span>12</span>/罐</p>
					</div>
					<div class="k1" style="margin-bottom: 0.5rem;">
						<img src="../../images/1.jpg" onerror='this.src="../../images/error-img.png"' class="bfb">
						<p class="sbt">sdsdg</p>
						<p class="price">￥<span>12</span>/罐</p>
					</div>
					<div class="k1" style="margin-bottom: 0.5rem;">
						<img src="../../images/1.jpg" onerror='this.src="../../images/error-img.png"' class="bfb">
						<p class="sbt">sdsdg</p>
						<p class="price">￥<span>12</span>/罐</p>
					</div>
					<div class="k1" style="margin-bottom: 0.5rem;">
						<img src="../../images/1.jpg" onerror='this.src="../../images/error-img.png"' class="bfb">
						<p class="sbt">sdsdg</p>
						<p class="price">￥<span>12</span>/罐</p>
					</div>
				</div>
			</div>
			
			<div class="foot-space">
				<div class="sku-actionBar">
					<div class="j-bottom-bar">
						<a href="" class="btn-cart">
							<span class="mui-icon iconfont icon-gouwuche"></span>
							<span class="ui-badge">3</span>
						</a>
					</div>
					<div class="sku-button">
						<a href="../shopping/index.html" class="btn btn-addcart">加入购物车</a>
						<a href="../shopping/jiesuan.html" class="btn btn-buy">立即购买</a>
					</div>
				</div>
			</div>
			<!-- 分享 -->
			<!-- <div id="share" class='ui-popup__container popup-bottom'>
				<div class="ui-popup__overlay"></div>
				<div class="ui-popup__modal">
					<div class="share-hd">分享到</div>
					<div class="share-cont">
						<a href="" class="share-item">
							<img src="./../../images/wx.png" alt="">
							<p>微信好友</p>
						</a>
						<a href="" class="share-item">
							<img src="./../../images/quan.png" alt="">
							<p>朋友圈</p>
						</a>
					</div>
					<div class="share-cancel close-popup">取消</div>
				</div>
			</div> -->
			<!-- 规格 -->
			<div id="skuG" class='ui-popup__container popup-bottom'>
				<div class="ui-popup__overlay"></div>
				<div class="ui-popup__modal">
					<div class="sku-pop-header">
						<div class="img-wrap"><img src="./../../images/1.jpg" alt=""></div>
						<div class="pop-inner-main">
							<div class="sku-pop-price">￥99.9</div>
							<div class="sku-info">已选“粉色西红柿”</div>
						</div>
					</div>
					<div class="sku-pop-content">
						<div class="sku-list-wrap">
							<div class="title">可选</div>
							<div class="sku-items">
								<a href="javascript:;" class="checked">粉色西红柿</a>
								<a href="javascript:;">粉色西红柿</a>
								<a href="javascript:;">粉色西红柿</a>
							</div>
						</div>
						<div class="sku-list-wrap">
							<div class="title">规格</div>
							<div class="sku-items">
								<a href="javascript:;" class="checked">1斤</a>
								<a href="javascript:;">2斤</a>
								<a href="javascript:;">3斤</a>
							</div>
						</div>
						<div class="sku-list-wrap justify">
							<div class="title">购买数量</div>
							<div class="ui-count">
								<a class="ui-count__btn ui-count__decrease"></a>
								<input class="ui-count__number" type="number" value="1" />
								<a class="ui-count__btn ui-count__increase"></a>
							</div>
						</div>
					</div>
					<div class="sku-pop-button">
						<button class="btn btn-submit">确定</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 计数 -->
		<script>
			var MAX = 99,
				MIN = 1;
			$('.ui-count__decrease').click(function(e) {
				var $input = $(e.currentTarget).parent().find('.ui-count__number');
				var number = parseInt($input.val() || "0") - 1
				if (number < MIN) number = MIN;
				$input.val(number)
			})
			$('.ui-count__increase').click(function(e) {
				var $input = $(e.currentTarget).parent().find('.ui-count__number');
				var number = parseInt($input.val() || "0") + 1
				if (number > MAX) number = MAX;
				$input.val(number)
			})

			$('.delete-swipeout').click(function() {
				$(this).parents('.ui-cell').remove()
			})
			$('.close-swipeout').click(function() {
				$(this).parents('.ui-cell').swipeout('close')
			})
			$('.sku-items a').click(function() {
				$(this).addClass('checked').siblings('a').removeClass('checked')
			})
		</script>
		<!-- slide -->
		<script>
			var swiper = new Swiper('.swiper-container', {
				centeredSlides: true,
				loop: true,
				autoplay: {
					delay: 5500,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			});
		</script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/common/config.js"></script>
		<script>
			mui.plusReady(function() {
				plus.key.addEventListener('backbutton', function() {
					plus.webview.currentWebview().close();
				});
				var self = plus.webview.currentWebview();
                vm.init(self);
			});
			// 获取滚动条顶部的距离
			document.addEventListener("scroll", function() {
				var t = document.documentElement.scrollTop || document.body.scrollTop;
				if (t > 150) {
					$("#header-top").css({
						"position": "fixed",
					});
				}
			});
			var vm = new Vue({
				el: "#app",
				data: {
					user_id:localStorage.getItem('user_id'),
					goods_id: '',
					goods: {},
					rands_goods: {}
				},
				methods: {
					init(param) {
                        this.goods_id = param.goods_id
						// 获取商品详情
						this.getGoodsDetails();
					},
					getGoodsDetails() {
						var _that = this;
						mui.ajax(Config.api.Goods_list, {
							data: {
								request_type: 1,
								goods_id: _that.goods_id,
								user_id: _that.user_id,
							},
							type: 'post',
							dataType: 'json',
							success: function(data) {
								_that.goods = data.data.goods;
							},
							error: function(xhr, type, errorThrown) {
								console.log("接口错误");
							}
						})
					},
				}
			});
			
		</script>
	</body>
</html>
